<template>
  <div class="ranking">
    <div class="pic">
      <RankingHeader :rank="rank" />
    </div>
    <div class="biao">歌曲列表</div>
    <HotList
      v-for="(item, index) in songs"
      :index="index"
      :key="item.id"
      :item="item"
      :playing="playing"
      :currentPlaySongId="currentPlaySongId"
       @click.native="$emit('update:gedan', songs)"
      @update:current-play-song="$emit('update:current-play-song', $event)"
    />
    <HotComment />
  </div>
</template>

<script>
import HotList from "../components/HotList.vue";
import RankingHeader from "../components/RankingHeader.vue";
import HotComment from "../components/HotComment.vue";

export default {
  props: {
    currentPlaySongId: [Number, String],
    playing: Boolean,
  },
  data: function () {
    return {
      songs: [],
      rank: {},
    };
  },
  components: {
    HotList,
    RankingHeader,
    HotComment,
  },
  created: function () {
    this.axios
      .get(
        "https://apis.netstart.cn/music/playlist/detail?id=" +
          this.$route.query.id
      )
      .then((res) => {
        // console.log(res);
        this.rank = res.data.playlist;
        this.songs = res.data.playlist.tracks;
      });
    // console.log(this.$route.query.id);
  },
};
</script>

<style lang="less" scoped>
.biao {
  background-color: #ccc;
  font-size: 12px;
  padding: 3px 0 3px 15px;
}
</style>